<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,
			body,
			input,
			div {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}
			
			.clearfix:after {
				display: block;
				content: "";
				clear: both;
			}
			
			#calculator {
				width: 300px;
				background: #5E5E5E;
				margin: 5px;
				padding: 10px;
			}
			
			.screens {
				width: 80%;
				height: 40px;
				background: #fff;
				margin: 0 auto;
				word-break: break-word;
			}
			
			.symbol {
				width: 100%;
				margin-top: 10px;
			}
			
			#calculator input {
				float: left;
				width: 32%;
				height: 50px;
				text-align: center;
				padding: 5px;
				font-size: 16px;
				outline: none;
				margin-right: 2px;
				margin-top: 2px;
			}
			
			#calculator input:hover {
				background: #e5e5e5;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var screens = document.getElementsByClassName('screens')[0];
				var symbols = document.getElementsByClassName('symbols');
				var plus = document.getElementById('plus');
				var xuhao = 0;
				var num = 0;
				var keys = document.getElementsByClassName('keys');
				var isclick = true;

				for(var i = 0; i < symbols.length; i++) {
					symbols[i].xuhao = i;
					
					if(i == 5) {//清除按钮清除功能
						symbols[i].onclick = function() {
							screens.innerText = "";
						}
					} else {
						if(i == 4) {//等号实现表达式运算
							symbols[i].onclick = function() {
								screens.innerText += (symbols[this.xuhao].value + eval(screens.innerText));
								isclick = false;
							}
						} else {
							symbols[i].onclick = function() {
								screens.innerText += symbols[this.xuhao].value;
							}

						}

					}
				}

				for(var i = 0; i < keys.length; i++) {
					keys[i].num = i;
					if(isclick == true) {
						keys[i].onclick = function() {
							screens.innerText += keys[this.num].value;
						}
					}else {
						alert();
						keys[i].onclick = function() {
							screens.innerText = keys[this.num].value;
						}
					}
				}
			}
		</script>
	</head>

	<body>
		<div id="calculator">
			<div class="screens">
			</div>
			<div class="symbol clearfix">
				<input type="text" name="plus" id="plus" value="+" readonly='readonly' class="symbols" />
				<input type="text" name="cut" id="cut" value="-" readonly='readonly' class="symbols" />
				<input type="text" name="times" id="times" value="*" readonly='readonly' class="symbols" />
				<input type="text" name="division" id="division" value="/" readonly='readonly' class="symbols" />
				<input type="text" name="" id="clear" value="=" readonly='readonly' class="symbols" />
				<input type="text" name="clear" id="pop" value="清除" readonly='readonly' class="symbols" />
			</div>
			<div class="clearfix">
				<input type="text" value="." readonly='readonly' class="keys" />
				<input type="text" value="0" readonly='readonly' class="keys" />
				<input type="text" value="1" readonly='readonly' class="keys" />
				<input type="text" value="2" readonly='readonly' class="keys" />
				<input type="text" value="3" readonly='readonly' class="keys" />
				<input type="text" value="4" readonly='readonly' class="keys" />
				<input type="text" value="5" readonly='readonly' class="keys" />
				<input type="text" value="6" readonly='readonly' class="keys" />
				<input type="text" value="7" readonly='readonly' class="keys" />
				<input type="text" value="8" readonly='readonly' class="keys" />
				<input type="text" value="9" readonly='readonly' class="keys" />
			</div>
		</div>
	</body>

</html>